
<template>
  <div class="singlePage">
    <leftMenu :menu-list="menuList"></leftMenu>
    <div class="s-singlePage spage">
      <searchForm ref="searchForm" @on-search="onSearch"></searchForm>
      <div class="table">
        <el-table
            :header-cell-style="{background:'#F8F9FA'}"
            :data="tableData"
            :height="'calc(100% - 40px)'"
            v-loading="loading"
            style="width: 100%">
          <el-table-column
              prop="date"
              label="序号">
            <template slot-scope="scope">
              <span>{{pageInfo.pageSize * (pageInfo.page -1) +scope.$index +1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="colName"
              label="栏目名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="categoryName"
              label="类别">
          </el-table-column>
          <el-table-column
              prop="title"
              label="标题">
          </el-table-column>
          <el-table-column
              prop="pic"
              label="图片">
            <template slot-scope="scope">
              <el-image
                  :lazy="true"
                  v-if="scope.row.pic"
                  style="width: 100px; height: 100px"
                  :src="scope.row.pic"
                  :preview-src-list="[scope.row.pic]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
              prop="createdTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              prop="state"
              label="状态">
            <template slot-scope="scope">
              <span :class="[{green:scope.row.state==3,red:scope.row.state==4}]">{{stateMap[scope.row.state]}}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="address"
              label="操作">
            <template slot-scope="scope">
              <seeBtn :params="scope.row" @after-op="afterOp"></seeBtn>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page="pageInfo.page" :pageSize="pageInfo.pageSize" :total="pageInfo.total" @pageChange="pageChange" @handleSizeChange="handleSizeChange"></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import leftMenu from "@/components/leftMenu";
import searchForm from '../module/searchForm'
import pagination from "@/components/pagination";
import seeBtn from "@/views/processHandling/module/seeBtn";
import dict from "@/util/dict";
export default {
  name: "audited",
  components:{
    leftMenu,
    searchForm,
    pagination,
    seeBtn
  },
  mounted() {
    this.paginAuditQuery()
  },
  methods:{
    onSearch(){
      this.pageInfo.page = 1
      this.paginAuditQuery()
    },
    afterOp(){
      this.paginAuditQuery()
    },
    pageChange(page){
      this.pageInfo.page = page
      this.paginAuditQuery()
    },
    handleSizeChange(size){
      this.pageInfo.pageSize = size
      this.pageInfo.page = 1
      this.contentPaginQuery()
    },
    paginAuditQuery(){
      let params = {
        state:2,
        ...this.$refs.searchForm.form,
        page:this.pageInfo.page-1,
        pageSize:this.pageInfo.pageSize
      }
      this.loading = true
      this.$api.paginAuditQuery(params).then(res=>{
        this.loading = false
        this.tableData = res.data.data
        this.pageInfo.total = res.data.recordsTotal
      })
    },
  },
  data(){
    return {
      pageInfo:{
        ...dict.pageInfo
      },
      stateMap:dict.stateMap,
      loading:false,
      menuList:[
        {
          title:'待审核',
          name:'audit'
        },
        {
          title:'已审核',
          name:'audited'
        }
      ],
      tableData: []
    }
  },
}
</script>

<style scoped lang="less">
.singlePage{
  display: flex;
  .table{
    height: calc(100% - 70px);
  }
}
</style>